import React, { Component, Memo } from "react";
//浅比较，比较第一层
/**
 * 相等返回true（不更新），不相等返回false（更新）
 * @param {*} old 老值
 * @param {*} current 新值
 */
function shallowEqual(old, current) {
  if (old === current) {
    // 引用地址比较
    return true;
  }
  if (
    // 必须是个对象
    typeof old !== "object" ||
    old === null ||
    typeof current !== "object" ||
    current === null
  ) {
    return false;
  }
  let keys1 = Object.keys(old);
  let keys2 = Object.keys(current);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (const key of keys1) {
    if (!current.haOwnProperty(key) || old[key] !== current[key]) {
      return false;
    }
  }
  return true;
}

class PureComponent extends Component {
  // 新的属性，新的状态
  shouldComponentUpdate(nextProps, nextState) {
    return (
      !shallowEqual(this.props, nextProps) ||
      !shallowEqual(this.state, nextState)
    );
  }
}

function Memo(type, compare = shallowEqual) {
  return {
    $$typeof: Symbol("react.memo"),
    compare: compare,
    type,
  };
}

function createDom() {}
//根据$$typeof 渲染
function mountMemocomponent(vdom) {
  let { type, props } = vdom;
  let renderVdom = type.type(props);
  vdom.preProps = props; // 记录一下老的属性，在属性变更的时候比对新老属性更新
  vdom.oldRenderVdom = renderVdom; // 替换旧的渲染虚拟dow
  return createDom(renderVdom); // 产生真实dow，
}

function updateElement(oldVdom, newVdom) {
  if (oldVdom.type && oldVdom.type.$$typeof === Symbol("react.memo")) {
    updateMemocomponent(oldVdom, newVdom);
  }
}

function updateMemocomponent(oldVdom, newVdom) {
  let { preProps, type } = oldVdom;
  if (!type.compare(preProps, newVdom.props)) {
    // 不相等的时候更新
    // .......
  } else {
  }
}
